<template>
  <div class="comment-management">
    <ReCommonTable
      ref="tableRef"
      title="评论管理"
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @search="handleRefresh"
      @refresh="handleRefresh"
      @size-change="handleSizeChange"
      @current-change="handleCurrentPageChange"
    >
      <!-- 状态列 -->
      <template #status="{ row }">
        <el-tag :type="getOrderStatusType(row.l_ystatus)">
          {{ getOrderStatusText(row.l_ystatus) }}
        </el-tag>
      </template>

      <!-- 操作列 -->
      <template #action="{ row }">
        <el-button size="small" @click="handleView(row)"> 查看</el-button>
      </template>
    </ReCommonTable>

    <!-- 评论详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="评论详情"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="currentComment" class="comment-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="评论ID">
            {{ currentComment.c_id }}
          </el-descriptions-item>
          <el-descriptions-item label="订单ID">
            {{ currentComment.c_oid }}
          </el-descriptions-item>
          <el-descriptions-item label="项目名称">
            {{ currentComment.l_pname }}
          </el-descriptions-item>
          <el-descriptions-item label="会员名称">
            {{ currentComment.l_mname }}
          </el-descriptions-item>
          <el-descriptions-item label="会员手机号">
            {{ currentComment.l_mobile || "未填写" }}
          </el-descriptions-item>
          <el-descriptions-item label="技师名称">
            {{ currentComment.t_name || "未分配" }}
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getOrderStatusType(currentComment.l_ystatus)">
              {{ getOrderStatusText(currentComment.l_ystatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="评论时间">
            {{ formatTime(currentComment.c_time) }}
          </el-descriptions-item>
          <el-descriptions-item label="评论内容" :span="2">
            <div class="comment-content">
              {{ currentComment.c_content }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { ReCommonTable } from "@/components/ReCommonTable";
import { getCommentList, type Comment } from "@/api/comment";
import type { TableColumn } from "@/components/ReCommonTable/src/index.vue";

defineOptions({
  name: "CommentManagement"
});

// 响应式数据
const loading = ref(false);
const tableData = ref<Comment[]>([]);
const detailVisible = ref(false);
const currentComment = ref<Comment | null>(null);

// 分页配置
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
});

// 表格列配置
const columns: TableColumn[] = [
  {
    prop: "c_id",
    label: "评论ID",
    width: 80
  },
  {
    prop: "l_mname",
    label: "会员名称",
    width: 120
  },
  {
    prop: "l_mobile",
    label: "手机号",
    width: 130
  },
  {
    prop: "l_price",
    label: "价格/分钟",
    formatter: (row: Comment) => `￥${row.l_price}/${row.l_project_time}分钟`,
    width: 150
  },
  {
    prop: "l_pname",
    label: "项目名称",
    width: 150
  },
  {
    prop: "t_name",
    label: "技师名称",
    width: 120,
    formatter: (row: Comment) => row.t_name || "未分配"
  },
  {
    prop: "l_ystatus",
    label: "订单状态",
    width: 100,
    slot: "status"
  },
  {
    prop: "c_content",
    label: "评论内容",
    minWidth: 200,
    showOverflowTooltip: true
  },
  {
    prop: "c_time",
    label: "评论时间",
    width: 120,
    formatter: (row: Comment) => formatTime(row.c_time)
  },
  {
    label: "操作",
    width: 100,
    slot: "action",
    fixed: "right"
  }
];

// 获取评论列表
const fetchCommentList = async () => {
  try {
    loading.value = true;
    const { data } = await getCommentList();
    tableData.value = data.list || [];
    pagination.total = Number(data.total); // 根据页数计算总数
  } catch (error) {
    console.error("获取评论列表失败:", error);
    ElMessage.error("获取评论列表失败");
  } finally {
    loading.value = false;
  }
};

// 刷新处理
const handleRefresh = () => {
  fetchCommentList();
};

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.current = 1;
  fetchCommentList();
};

// 当前页改变
const handleCurrentPageChange = (current: number) => {
  pagination.current = current;
  fetchCommentList();
};

// 查看详情
const handleView = (row: Comment) => {
  currentComment.value = row;
  detailVisible.value = true;
};

// 格式化时间
const formatTime = (timestamp: string) => {
  if (!timestamp) return "-";
  const date = new Date(parseInt(timestamp) * 1000);
  return date.toLocaleString("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit"
  });
};

// 获取订单状态文本
const getOrderStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    "1": "未到店",
    "2": "已到店",
    "3": "已超时",
    "4": "已取消"
  };
  return statusMap[status] || "未知";
};

// 获取订单状态类型
const getOrderStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    "1": "warning",
    "2": "success",
    "3": "danger",
    "4": "info"
  };
  return typeMap[status] || "";
};

// 生命周期
onMounted(() => {
  fetchCommentList();
});
</script>

<style scoped>
.comment-management {
  padding: 20px;
}

.comment-detail {
  padding: 20px 0;
}

.comment-content {
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  line-height: 1.6;
  word-break: break-all;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

:deep(.el-descriptions__body) {
  background-color: #fff;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}
</style>
